<!-- 事件日志 -->
<template>
  <!-- <div class="dashboard-editor-container"> -->
  <el-row style="background: #fff;">
    <connsearch ref="connsearch" :formOptions="formOptions" @search="search" @reset="reset"> </connsearch>
    <el-col :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 24 }" :lg="{ span: 24 }" :xl="{ span: 24 }"
      style="padding-right: 8px;">
      <el-table stripe border :data="tableData" style="width: 100%;">
        <el-table-column label="序号" width="60" type="index"
          :index='(index) => { return (index + 1) + (this.pageNum - 1) * this.pageSize }'> </el-table-column>
        <el-table-column label="软件分类" show-overflow-tooltip prop="AppClass">
          <template slot-scope="{row}">
            <span>{{ row.AppClass === '' ? '未知分类' : row.AppClass }}</span>
          </template>
        </el-table-column>
        <el-table-column label="软件名称" show-overflow-tooltip prop="AppName"></el-table-column>
        <el-table-column label="操作系统" show-overflow-tooltip prop="OSClass"></el-table-column>
        <el-table-column label="发布产商" show-overflow-tooltip prop="Descp"></el-table-column>
        <el-table-column label="版本号" show-overflow-tooltip prop="Version"></el-table-column>
        <el-table-column label="数量" show-overflow-tooltip prop="TransTime"></el-table-column>
        <el-table-column label="操作" width="120px" fixed="right">
          <template slot-scope="scope">
            <!-- <el-button type="primary" size="mini" @click="changeModer(scope.row)">加入字典</el-button> -->
            <el-button type="primary" size="mini" @click="installationDetails(scope.row)">安装明细</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page=pageNum
        :page-size=pageSize background layout="total, prev, pager, sizes, next, jumper" :total="total">
      </el-pagination>
    </el-col>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="installPopUps" title="安装明细"
      top="5vh" v-el-drag-dialog width="85%">
      <el-table stripe border :data="installationTable" style="width: 100%;" height="661">
        <el-table-column label="序号" width="60" type="index"
          :index='(index) => { return (index + 1) + (this.pageNum - 1) * this.pageSize }'> </el-table-column>
        <el-table-column label="部门" show-overflow-tooltip prop="Department" width="120px"></el-table-column>
        <el-table-column label="资产名称" show-overflow-tooltip prop="DeviceName" width="160px"></el-table-column>
        <el-table-column label="使用者" show-overflow-tooltip prop="UserName" width="120px"></el-table-column>
        <el-table-column label="采集时间" show-overflow-tooltip prop="TransTime" width="160"></el-table-column>
        <el-table-column label="软件分类" show-overflow-tooltip prop="AppClass" width="130">
          <template slot-scope="{row}">
            <span>{{ row.AppClass === '' ? '未知分类' : row.AppClass }}</span>
          </template>
        </el-table-column>
        <el-table-column label="安全等级" show-overflow-tooltip prop="Level"></el-table-column>
        <el-table-column label="软件名称" show-overflow-tooltip prop="AppName"></el-table-column>
        <el-table-column label="操作系统" show-overflow-tooltip prop="OSClass"></el-table-column>
        <el-table-column label="发布产商" show-overflow-tooltip prop="Factory"></el-table-column>
        <el-table-column label="版本号" show-overflow-tooltip prop="Version"></el-table-column>
        <el-table-column label="描述" show-overflow-tooltip prop="Descp"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" @click="installPopUps = false">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="moderVisible" title="加入字典"
      v-el-drag-dialog @close="Moder = {}" width="30%">
      <el-form label-width="100px" :rules="rules" :model="Moder" ref="Moder">
        <el-form-item label="软件名称" prop="AppName">
          <el-input placeholder="请输入软件名称" maxlength="64" disabled v-model="Moder.AppName"></el-input>
        </el-form-item>
        <el-form-item label="软件分类" prop="Class">
          <el-select v-model="Moder.Class" placeholder="请选择软件分类" style="width:100%">
            <el-option v-for="(item, index) in dictionaryList" :key="index" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="软件版本" prop="Version">
          <el-input placeholder="请输入软件版本" maxlength="32" v-model="Moder.Version"></el-input>
        </el-form-item>
        <el-form-item label="操作系统" prop="OSClass">
          <el-select v-model="Moder.OSClass" style="width:100%" placeholder="请选择适用系统">
            <el-option label="Windows" value="Windows"></el-option>
            <el-option label="Mac" value="Mac"></el-option>
            <el-option label="Android" value="Android"></el-option>
            <el-option label="Linux" value="Linux"></el-option>
            <el-option label="Other" value="Other"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="系统类型" prop="OSType">
          <el-select v-model="Moder.OSType" style="width:100%" placeholder="请选择系统类型">
            <el-option label="全部" value=""></el-option>
            <el-option label="64" value="64"></el-option>
            <el-option label="32" value="32"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="软件类型" prop="Property">
          <el-select v-model="Moder.Property" style="width:100%" placeholder="请选择软件类型">
            <el-option label="必装软件" :value="1"></el-option>
            <el-option label="非法软件" :value="2"></el-option>
            <el-option label="选装软件" :value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit()">确 定</el-button>
        <el-button type="info" @click="moderVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </el-row>
  <!-- </div> -->
</template>

<script>
import Cookies from 'js-cookie'
import connsearch from "@/components/connSearch";
import barchart from "./components/barchart.vue";
import piechart from "./components/piechart.vue";
import { parseTime } from "@/utils/index.js";
import { connrequest } from "@/api/firstPage.js"
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
export default {
  directives: { elDragDialog },
  components: { connsearch, barchart, piechart },
  data() {
    let that = this
    return {
      activeName: "",
      tabTitle: '按分区统计分析',
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tab: false,
      moderVisible: false,
      installPopUps: false,
      Moder: {},
      rules: {},
      partitionList: [],
      dictionaryList: [],
      installationTable: [],
      barchartData: { xAxis: [], series: [] },
      pie1Data: [],
      pie2Data: [],
      pie3Data: [],
      pie4Data: [],
      pie5Data: [],
      tableData: [],
      searchform: {},
      options: {},
      searchobj: {},
      formOptions: [
        // {
        //   col: 8,
        //   hidden: false,
        //   label: "日期", // label文字
        //   prop: "timeRange", // 字段名
        //   initValue: [], // 字段初始值,
        //   element: "el-date-picker", // 指定elementui组件
        //   type: "", // 日期选择类型,
        //   events: {
        //     input(val) {
        //       that.searchform.timeRange = val
        //     },
        //   },
        // },
        {
          col: 6,
          hidden: false,
          label: "软件分类", // label文字
          prop: "AppClass", // 字段名
          element: "el-select", // 指定elementui组件
          initValue: '', // 字段初始值,
          placeholder: "请选择软件分类", // elementui组件属性
          options: [],
          rules: [], // elementui组件属性
          events: {
            input(val) {
              that.searchform.AppClass = val
            },
          },
        },
        {
          col: 6,
          label: "软件名称",
          prop: "AppName",
          element: "el-input",
          placeholder: "请输入软件名称",
          maxlength: 50,
          events: {
            input(val) {
              that.searchform.AppName = val
            },
          },
        },
      ],
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.pageSize = (Cookies.get('Zhuoguan_DefaultPageLength') || 10) * 1;

    // let endTime = new Date(new Date().setHours(0, 0, 0, 0)).getTime() 
    // let startTime = endTime - ((Cookies.get('Zhuoguan_DefaultLogDays') || 7) * 24 * 3600 * 1000);
    // let arr = [ parseTime(startTime), '']
    // this.formOptions.map( item => {
    //   if(item.label === '日期'){
    //     item.initValue = arr
    //   }
    // })
    // this.$set(this.searchform,'timeRange', arr)
    this.getData()
    this.GetDictInstallAppSumByClass()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
  },
  methods: {
    async GetDictInstallAppSumByClass() {
      const res = await connrequest('GetDictInstallAppSumByClass')
      let arr = [{ label: '全部', value: '' }]
      res.Data.map(item => {
        arr.push({ label: item.Name, value: item.Name })
      })
      this.formOptions.map(item => {
        if (item.label === '软件分类') {
          item.options = arr
        }
      })
      this.partitionList = arr
      this.$set(this.searchform, 'ProcClass', '')
    },
    changeModer(row) {
      let partitionList = this.partitionList.filter(item => item.label !== '全部')
      this.dictionaryList = partitionList
      this.Moder = { ...row, Property: row.Property || 3, Class: row.Class || partitionList[0]?.label }
      this.moderVisible = true;
    },
    handleChange() { },
    // 获取所有数据
    getData() {
      this.GetEventLog()
    },
    async installationDetails(row) {
      const data = {
        Paging: {
          QueryPageNo: 1,
          QueryPageLength: 1000000
        },
        Filter: {
          AppName: row.AppName,
          Version: row.Version,
          InstallAppType: 1,
        }
      }
      const res = await connrequest('GetInstallApp', data)
      this.installPopUps = true
      res.Data = res.Data || []
      res.Data = res.Data.map(item => {
        item.TransTime = parseTime(item.TransTime)
        return item
      })
      this.installationTable = res.Data
    },
    tabClick(row) {
      this.tabTitle = row.label
    },
    // 获取事件日志列表
    async GetEventLog(searchobj = {}) {
      const data = {
        Paging: {
          QueryPageNo: this.pageNum,
          QueryPageLength: this.pageSize
        },
        Filter: {
          AppClass: this.searchform.AppClass,
          AppName: this.searchform.AppName,
          Descp: this.searchform.Descp,
          ...searchobj
        }
      }
      const res = await connrequest('GetInstallAppSum', data)
      res.Data = res.Data || []
      this.tableData = res.Data
      this.total = res.Paging.TotalCount
    },
    async submit() {
      const data = {
        Data: {
          Action: 1,
          Detail: {
            Descp: this.Moder.AppName,
            Factory: this.Moder.Descp,
            Class: this.Moder.Class,
            Version: this.Moder.Version,
            OSClass: this.Moder.OSClass,
            OSType: this.Moder.OSType,
            Property: this.Moder.Property,
          }
        }
      }
      const res = await connrequest('EditDictInstallApp', data)
      if (res.Status.StatusCode === 0) {
        this.$message.success('加入字典成功')
        this.moderVisible = false
        this.getData()
      }
    },
    // 搜索
    search(val) {
      this.pageNum = 1
      this.searchobj = {}
      this.searchform = { ...val }
      if (this.searchform.timeRange) {
        this.searchobj = { StartTime: this.searchform?.timeRange[0] || '', EndTime: this.searchform?.timeRange[1] || '' }
      }
      this.getData()
    },
    // 重置
    reset() {
      this.pageNum = 1
      this.formOptions = this.formOptions.map(item => {
        if (item.label === "统计排名") {
          item.initValue = 10
        } else {
          item.initValue = ""
        }
        return item
      })
      this.searchform = {}
      this.searchobj = {}
      this.$refs.connsearch.addInitValue()
      this.getData()
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.pageNum = 1
      this.GetEventLog({ ...this.searchobj, StartTime: this.searchobj?.StartTime || this.searchform.timeRange?.[0] || '', EndTime: this.searchobj?.EndTime || this.searchform.timeRange?.[1] || '' })
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.GetEventLog({ ...this.searchobj, StartTime: this.searchobj?.StartTime || this.searchform.timeRange?.[0] || '', EndTime: this.searchobj?.EndTime || this.searchform.timeRange?.[1] || '' })
    },
    handleClick() {
      this.tab = !this.tab
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./components/css/conncss.scss";
</style>